<template>
	<!--v-if="detail.length>0"-->
	<view style="background: #fff;width: 95%;margin: auto;border-radius: 15rpx;" v-if="seckillList.length != ''">
		<view class="title-box x-bc" style="margin-top: 50rpx;" @tap="jump('/pages/activity/GoodsSeckill/index')">
			<!-- <view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/GoodsList/index',query:{id,title} })"> -->
			<!-- ?id=211&title=宠物专区 -->
			<text class="title" style="margin-top: 24rpx;">限时<text style="color: #FF0606;">秒杀</text></text>
			<view class="group-people x-f" style="margin-top: 24rpx;">
				<text class="tip">查看更多</text>
				<text class="cuIcon-right"></text>
			</view>
		</view>
		<view class="group-goods pa20 mx20 mb10">
			<view class="goods-box swiper-box x-f">
				<block  style="background: #fff;">
					<view class="min-goods min-gai"  style="background: #fff;">
						<view class="img-box" style="background: #fff;">
							<view class="tese-e" v-for="(item,index) in seckillList" @tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: item.id } })">
								<view class="tese-r">
									<image class="img" :src="item.image" mode="widthFix">
								</view>
								<view class="tese-t"></view>
								<view class="tese-y" :style="{width:item.percent +'px'}"></view>
								<view class="tese-yy">已抢{{item.percent}}%</view>
							</view>
						</view>
					</view>
					
				</block>
			</view>
		</view>
	</view>
</template>

<script>
// import shSeckillGood from '@/components/sh-seckill-good.vue';
import { getSeckillConfig, getSeckillList } from '@/api/activity';
export default {
	// name: 'SeckillProduct',
	// components: {
	// 	shSeckillGood
	// },
	data() {
		return {
			seckillList: [],
			swiperCurrent: 0,
			seckItem: [],
		};
	},
	// props: {
	// 	detail: Array,
	// 	seckItem: null
	// },
	computed: {},
	created() {},
	// watch: {
	// 	detail(next) {
	// 		this.goodsList = this.sortData(next);
	// 		console.log('mmmmmmmm', this.goodsList);
	// 	}
	// },
	mounted() {
		this.mountedStart();
	},
	methods: {
		swiperChange(e) {
			this.swiperCurrent = e.detail.current;
		},
		mountedStart: function() {
			getSeckillConfig().then(res => {
				var timeList = res.data.seckillTime;
				var timeId1 = null; //抢购中id
				var timeId2 = null; //即将开始id
				var timeId0 = null; //结束id

				for (let item of timeList) {
					if (item.status == 1) {
						timeId1 = item.id;
						this.seckItem = item;
						break;
					} else if (item.status == 2) {
						timeId2 = item.id;
						this.seckItem = item;
						break;
					} else {
						timeId0 = item.id;
						this.seckItem = item;
					}
				}

				if (timeId1) {
					this.getSeckillList(timeId1);
				} else if (timeId2) {
					this.getSeckillList(timeId2);
				} else {
					this.getSeckillList(timeId0);
				}
			});
		},
		
		getSeckillList(timeId) {
			var that = this;
			getSeckillList(timeId, {
				page: 1,
				limit: 8
			}).then(res => {
				console.log('11111111111111111',res)
				that.seckillList=res.data.seckillList;
		
			});
		},
		// 数据分层
		// sortData(oArr, length) {
		// 	let arr = [];
		// 	let minArr = [];
		// 	oArr.forEach(c => {
		// 		if (minArr.length === length) {
		// 			minArr = [];
		// 		}
		// 		if (minArr.length === 0) {
		// 			arr.push(minArr);
		// 		}
		// 		minArr.push(c);
		// 	});

		// 	return arr;
		// },
		jump(path, query) {
			this.$yrouter.push({
				path,
				query
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.group-goods {
	position: relative;
	z-index: 9;
	display: flex;
	padding: 0;
}

.swiper-box,
.carousel {
	width: 95%;
	height: 282upx;
	position: relative;
	border-radius: 15rpx;

	.carousel-item {
		width: 100%;
		height: 100%;
		// padding: 0 28upx;
		overflow: hidden;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
		// border-radius: 10upx;
		background: #ccc;
	}
}

.swiper-dots {
	display: flex;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0rpx;
	z-index: 66;

	.dot {
		width: 5px;
		height: 5px;
		background: #eee;
		border-radius: 100%;
		margin-right: 10rpx;
	}

	.dot-active {
		width: 5px;
		height: 5px;
		background: #a8700d;
		border-radius: 100%;
		margin-right: 10rpx;
	}
}

.min-goods {
	background: #ffffff;
}
// 今日必拼+限时抢购
.title-box {
	width: 92%;
	margin: auto;
	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	.tip {
		font-size: 22rpx;
		padding-left: 30rpx;
		color: #666;
	}
}
.group-goods {
	border-radius: 20rpx;
	overflow: hidden;

	.title-box {
		padding-bottom: 20rpx;
		.title {
			font-size: 32rpx;
			font-weight: bold;
		}

		.group-people {
			.time-box {
				font-size: 26rpx;
				color: #edbf62;

				.count-text-box {
					width: 30rpx;
					height: 34rpx;
					background: #edbf62;
					text-align: center;
					line-height: 34rpx;
					font-size: 24rpx;
					border-radius: 6rpx;
					color: rgba(#fff, 0.9);
					margin: 0 8rpx;
				}
			}

			.head-box {
				.head-img {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background: #ccc;
				}
			}

			.tip {
				font-size: 28rpx;
				padding-left: 30rpx;
				color: #666;
			}

			.cuIcon-right {
				font-size: 30rpx;
				line-height: 28rpx;
				color: #666;
			}
		}
	}

	.goods-box {
		.goods-item {
			margin-right: 22rpx;
			&:nth-child(4n) {
				margin-right: 0;
			}
		}
	}
}
.min-goods {
	width: 670rpx;
	height: 242rpx;
	margin-top: 24rpx;
	border-radius: 15rpx;
	.img-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		height: auto;
		.tese-e {
			.tese-r{
				width: 170rpx;
				height: 137rpx;
				margin-left: 16rpx;
				margin-right: 16rpx;
				margin-top: 23rpx;
				.img {
					width: 100%;
					height: 100%;
				}
			}
			.tese-t{
				width: 170rpx;
				height: 23rpx;
				background: #CCCCCC;
				border-radius: 12px;
				margin-left: 16rpx;
				margin-top: 23rpx;
				position: relative;
				z-index: 1;
			}
			.tese-y{
				position: absolute;
				height: 23rpx;
				background: red;
				border-radius: 12px;
				margin-left: 16rpx;
				z-index: 2;
				top: 180rpx;
				
			}
			.tese-yy{
				position: absolute;
				height: 23rpx;
				border-radius: 12px;
				margin-left: 20rpx;
				z-index: 3;
				top: 169rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 23px;
			}
		}
	}
}
</style>
